<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-07-14 15:08:24
 * @LastEditors: lk
 * @LastEditTime: 2022-01-10 17:13:00
-->
<template>
  <div ref="bottom1_container" style="height:90%"></div>
</template>
<script>
import { Area } from '@antv/g2plot';
export default{
  data(){
   return {
     
   }
},
mounted(){
 this.initChat();
},
methods:{
   initChat(){
     const data = [
  {
    "country": "Taiyuan",
    "year": "1750",
    "value": 502
  },
  {
    "country": "Taiyuan",
    "year": "1800",
    "value": 635
  },
  {
    "country": "Taiyuan",
    "year": "1850",
    "value": 809
  },
  {
    "country": "Taiyuan",
    "year": "1900",
    "value": 947
  },
  {
    "country": "Taiyuan",
    "year": "1950",
    "value": 1402
  },
  {
    "country": "Taiyuan",
    "year": "1999",
    "value": 3634
  },
  {
    "country": "Taiyuan",
    "year": "2020",
    "value": 5268
  },
  {
    "country": "Jinzhong",
    "year": "1750",
    "value": 106
  },
  {
    "country": "Jinzhong",
    "year": "1800",
    "value": 107
  },
  {
    "country": "Jinzhong",
    "year": "1850",
    "value": 111
  },
  {
    "country": "Jinzhong",
    "year": "1900",
    "value": 133
  },
  {
    "country": "Jinzhong",
    "year": "1950",
    "value": 221
  },
  {
    "country": "Jinzhong",
    "year": "1999",
    "value": 767
  },
  {
    "country": "Jinzhong",
    "year": "2020",
    "value": 1766
  },
  {
    "country": "Yangquan",
    "year": "1750",
    "value": 163
  },
  {
    "country": "Yangquan",
    "year": "1800",
    "value": 203
  },
  {
    "country": "Yangquan",
    "year": "1850",
    "value": 276
  },
  {
    "country": "Yangquan",
    "year": "1900",
    "value": 408
  },
  {
    "country": "Yangquan",
    "year": "1950",
    "value": 547
  },
  {
    "country": "Yangquan",
    "year": "1999",
    "value": 729
  },
  {
    "country": "Yangquan",
    "year": "2020",
    "value": 628
  }
];
const area = new Area(this.$refs.bottom1_container,  {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'country',
      color: ['#82d1de', '#cb302d', '#e3ca8c'],
      areaStyle: {
        fillOpacity: 0.7,
      },
      appendPadding: 10,
      isPercent: true,
      yAxis: {
        label: {
          formatter: (value) => {
            return value * 100;
          },
        },
      },
      pattern: {
        type: 'line',
      },
    });
    area.render();
}
}
}
</script>